<%@ page import="finalshu.FinalShu" %><%--
  Created by IntelliJ IDEA.
  User: 10070
  Date: 2022/4/18
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天界面</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="<%=request.getContextPath()%>/work/js/PillowTalk.js"></script>
    <script>
        $(document).ready(function(){
            // 点击更换聊天人物
            let toNameWho ;
            $("#friendsUl > *").click(function() {
                document.getElementById('who').innerHTML = this.innerHTML;
                toNameWho = this.innerHTML;
            })
            $("#friendsUl > *").mouseenter(function(){
                $(this).css("color","lawngreen");
            })
            $("#friendsUl > *").mouseleave(function(){
                $(this).css("color","black");
            })
            // 点击消息发送的事件
            $("#outsInput").click(function(){
                let myDate = new Date;
                let year = myDate.getFullYear(); //获取当前年
                let mon = myDate.getMonth() + 1; //获取当前月
                let date = myDate.getDate(); //获取当前日
                let h = myDate.getHours();//获取当前小时数(0-23)
                let m = myDate.getMinutes();//获取当前分钟数(0-59)
                // let s = myDate.getSeconds();//获取当前秒
                let times = year+"-"+mon+"-"+date+"   "+h+":"+m;
                //信息打包发送至服务器
                let msgStr ={
                    toName:toNameWho,
                    name:"<%=request.getSession().getAttribute(FinalShu.FINAL_ID)%>",
                    message:$("#textareas").val(),
                    time:times,
                }
                $.ajax({
                    url:"<%=request.getContextPath()%>/loginText",
                    dataType:'json',
                    data:msgStr,
                    contentType:"application/json",
                    success:function (data){
                        // alert('执行完毕');
                        // console.log(daata);
                    }
                })
                document.getElementById('textareas').value = "";//讲发送栏清空
            })
            //聊天信息栏的内容每1秒更新一次
            setInterval(function (){
                let msgString ={
                    name:"<%=request.getSession().getAttribute(FinalShu.FINAL_ID)%>",
                    toName:toNameWho,
                }
                $.ajax({
                    url: "<%=request.getContextPath()%>/textVal",
                    dataType: 'json',
                    data:msgString,
                    contentType: "application/json",
                    success:function (data){
                        console.log(data)
                        console.log(data.status)
                        console.log(data.msg)
                        let strings = "";
                        if (data.status == 200){
                            if (data.msg == "success"){
                                //信息的轮回处理
                                $.each(data.other,function (i,item){
                                    $.each(item,function (i,item){
                                        if (i == "name" ){
                                                if (item == "<%=request.getSession().getAttribute(FinalShu.FINAL_ID)%>"){
                                                    strings = strings+"<li class='meOne'>"+item;
                                                }else {
                                                    strings = strings+"<li>"+item;
                                                }
                                            }
                                        else if(i == "time"){
                                            strings = strings+"<span>"+"（"+item+"）"+"</span>"+"：";
                                            }
                                        else if(i == "message"){
                                            strings = strings+item+"</li>";
                                            }
                                    })
                                })
                            }
                        }
                        else {
                            strings = "";
                        }
                        document.getElementById('textsUl').innerHTML = strings;//发到聊天信息栏
                    }
                })
            },1000)
            //登录广播的内容每1秒更新一次
            setInterval(function (){
                $.ajax({
                    url: "<%=request.getContextPath()%>/loginList",
                    dataType: 'json',
                    contentType: "application/json",
                    success:function (data){
                        console.log(data)
                        console.log(data.status)
                        console.log(data.msg)
                        let strings = "";
                        if (data.status == 200){
                            if (data.msg == "success"){
                                //信息的轮回处理
                                $.each(data.other,function (i,item){
                                    if (item != null && i != "<%=request.getSession().getAttribute(FinalShu.FINAL_ID)%>"){
                                        strings = strings+"<li>"+"你的好友&nbsp;<span>"+i+"</span>&nbsp;已上线"+"（"+item+"）"+"</li>";
                                    }
                                })
                            }
                        }
                        document.getElementById('noticeUl').innerHTML = strings;//发到通知栏
                    }
                })
            },1000)
        });
    </script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/work/css/PillowTalk.css">
</head>
<body>
<div class="bodys">
    <div class="heads">
        <div class="mes">
            <img src="../work/img/man.webp" alt="">
            <p id="mesId">
                <%=request.getSession().getAttribute(FinalShu.FINAL_ID)%>
            </p>
        </div>
        <div class="titles">
            <br>
            <p class="hers">正在和&nbsp;<span id="who"></span>&nbsp;聊天</p>
        </div>
<%--        <select id="meState">--%>
<%--            <option>在线</option>--%>
<%--            <option>下线</option>--%>
<%--            <option>隐身</option>--%>
<%--            <option>不在</option>--%>
<%--        </select>--%>
        <div class="loginOut"><a href="<%=request.getContextPath()%>/loginOut">退出</a></div>
    </div>
    <div class="sections">
        <div class="left">
            <div class="friends">
                <h4>好友列表</h4>
                <ul id="friendsUl">
                    <li>Z3</li>
                    <li>L4</li>
                    <li>W5</li>
                    <li>Z6</li>
                    <li>L7</li>
                    <li>Y8</li>
                </ul>
            </div>
            <div class="notice">
                <h4>系统通知</h4>
                <ul id="noticeUl">
<%--                    <li>你的好友&nbsp;<span>李四</span>&nbsp;已上线</li>--%>
<%--                    <li>你的好友&nbsp;<span>李四</span>&nbsp;给你发消息</li>--%>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="texts">
                <ul id="textsUl" class="textsUl">
<%--                    <li><img src="../work/img/woman.webp" alt="">&nbsp;<p>&nbsp;<span>你好！张三</span> &nbsp;</p></li>--%>
                </ul>
            </div>
            <div class="outs">
                <textarea name="" id="textareas" style="resize: none;"></textarea>
                <input type="button" value="发送" id="outsInput">
            </div>
        </div>
    </div>
</div>
</body>
</html>
